<!DOCTYPE html>
<html>

<head>
    <title>竞赛记录</title>
    <meta charset="utf-8">
        <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style>
        body {
            background-color: #66ccff;
        }

        .show {
            display: flex;
            justify-content: center;
        }

        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            margin-top: 50px;
            width: 1000px;
            min-height: 600px;
        }

        table {
            margin: 20px auto !important;
            width: 90% !important;
            border-collapse: collapse;
        }

        th, td {
            text-align: center !important;
        }
    </style>
    <script src="../jquery-3.6.0.min.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var id = location.search.substr(1).split("=")[1];
            $("h1").html(id);

            $.ajax({
                url: "getInfo.php",
                type: "GET",
                data: {
                    id: id
                },
                success(res) {
                    $("#info").html(res);
                }
            })
        }
    </script>
</head>

<body>
    <div class="show">
        <div class="box">
            <h1 style="margin-top: 20px;"></h1>
            <table class="layui-table">
                <thead>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>总字数</th>
                    <th>时间</th>
                    <th>日期</th>
                    <th>速度</th>
                    <th>正确率</th>
                </thead>
                <tbody id="info"></tbody>
            </table>
        </div>
    </div>
</body>

</html>